<template>
    <div class="music-player">
        <el-text class="text">试听</el-text>
        <StateButton class="btn-left" imgSrc="./assets/音叶/倒退.png"></StateButton>
        <StateButton class="btn-play" v-if="!running" imgSrc="./assets/音叶/点击暂停.png" @click="play"></StateButton>
        <StateButton class="btn-pause" v-if="running" imgSrc="./assets/音叶/点击播放.png" @click="pause"></StateButton>
        <StateButton class="btn-right" imgSrc="./assets/音叶/快进.png"></StateButton>

        <el-text class="text2">{{ prostr }}</el-text>
        <div class="pro-bg">
            <div class="pro-bar" :style="'width:'+proWidth+'%'">
            </div>
        </div>
    </div>
</template>
  
<script lang="ts" setup>

import { ref, onMounted, watch} from 'vue';
import StateButton from './StateButton.vue';
import { ElMessage } from 'element-plus';

const props = defineProps({
    src: {
        type: String,
        default: ''
    }
});
defineExpose({play})

// var audio = new Audio('https://www.shiyinren.com/server/1/221822646.mp3');
//http://192.168.2.27/assets/588957081.mp3

var audio = new Audio(props.src);
const proWidth = ref(0);
const running = ref(false);
const prostr = ref('');
let duration:number = 0;

// 监听 title 属性的变化
watch(() => props.src, (newvalue, oldvalue) => {
    audio.src = newvalue;
    audio.load();
});

// 绑定加载数据事件
audio.onloadeddata = function() {
    console.log('音频已加载完成！');
    console.log("duration="+(audio).duration);
    duration = audio.duration;
    // prostr.value = '0/' + duration;
    prostr.value = formatStr(0, duration);
};
 
// 开始加载音频资源
audio.load();

var tid = setInterval(() => {
    
    // console.log("curTime="+(audio).currentTime);
    // console.log("duration="+(audio).duration);

    var curTime = audio.currentTime;
    proWidth.value = 100 * (curTime / duration);
    // prostr.value = audio.currentTime + '/' + duration;

    prostr.value = formatStr(curTime, duration);

    if(curTime >= duration){
        audio.currentTime = 0;
        pause();
    }
}, 100);

function formatStr(curTime:number, allTime:number){
    var min = Math.floor(curTime / 60);
    var sec = Math.floor(curTime % 60);
    var minStr = min < 10 ? '0' + min : '' + min;
    var secStr = sec < 10 ? '0' + sec : '' + sec;
    
    var min2 = Math.floor(allTime / 60);
    var sec2 = Math.floor(allTime % 60);
    var minStr2 = min2 < 10 ? '0' + min2 : '' + min2;
    var secStr2 = sec2 < 10 ? '0' + sec2 : '' + sec2;

    return minStr + ":" + secStr + "/" + minStr2 + ":" + secStr2;
}

onMounted(()=>{
    // console.log("currentTime="+(audio).duration);
})

 
function play() {
    if(!props.src){
        ElMessage({
            message: '请先 生成文本语音！',
            type: 'warning',
        })
        return;
    }
    running.value = true;
    audio.play();
}
 
function pause() {
    if(!props.src){
        return;
    }
    running.value = false;
    audio.pause();
}

</script>
<style scoped>

.text2{
    position: absolute;
    font-size: 15px;
    color: white;
    top: 60px;
    right: 20px;
}
.text{
    position: absolute;
    font-size: 22px;
    color: white;
    top: 10px;
    left: 10px;
}
.btn-left{
    position:absolute;
    width: 29px;
    height: 23.66px;
    left: 114px;
    top:32px;
}
.btn-play{
    position:absolute;
    width: 35px;
    height: 38.66px;
    left: 181px;
    top:23px;
}
.btn-pause{
    position:absolute;
    width: 35px;
    height: 38.66px;
    left: 181px;
    top:23px;
}
.btn-right{
    position:absolute;
    width: 29px;
    height: 23.66px;
    left: 251px;
    top:32px;
}
.pro-bg{
    position:absolute;
    background-color: #737373;
    width: 378px;
    height: 8px;
    border-radius: 3px;
    top:85px;
    left: 11px;
    overflow: hidden;
}
.pro-bar{
    background-color: #8ddc81;
    width: 100%;
    height: 8px;
}
.music-player {
    position: relative;
  background-color: #2e2e2e;
  border: 1px solid #8b8b8b;
  border-radius: 6px;
}

</style>
  